<template>
  <div class="activityPage">
    <div class="searchBox bgfff">
      <el-form
        :inline="true"
        :model="form"
        ref="formRef"
        class="demo-form-inline"
        size="small"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="活动类型：" prop="type">
              <el-select v-model="form.type" placeholder="活动类型">
                <el-option label="区域一" value="1"></el-option>
                <el-option label="区域二" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="上下架状态：" prop="status">
              <el-select v-model="form.status" placeholder="上下架状态">
                <el-option label="上架" value="1"></el-option>
                <el-option label="下架" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="活动标题：" prop="title">
              <el-input v-model="form.title" placeholder="活动标题"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item>
              <el-button type="primary" size="small" @click="onSubmit"
                >查询</el-button
              >
              <el-button @click="resetForm('formRef')">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="tablesCard bgfff">
      <div class="tablesCardTop">
        <div class="totalTxt">活动总数:42</div>
        <el-button type="primary" size="small" @click="onAdd">新增</el-button>
      </div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" label="序号" width="60" align="center">
        </el-table-column>
        <el-table-column prop="type" label="活动类型" align="center">
        </el-table-column>
        <el-table-column prop="title" label="活动标题" align="center" />
        <el-table-column
          prop="address"
          label="活动地点"
          align="center"
        />
        <el-table-column
          prop="time"
          label="活动时间"
          align="center"
        />
        <el-table-column
          prop="jztime"
          label="报名截止时间"
          align="center"
        />
        <el-table-column
          prop="score"
          label="活动积分"
          align="center"
        >
          <template slot-scope="scope">
            <span style="color: #1890ff">{{ scope.row.score }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="maxNum"
          label="活动人数上限"
          align="center"
        />
        <el-table-column
          prop="signNum"
          label="已报名人数"
          align="center"
        />
        <el-table-column
          prop="qdNum"
          label="已签到人数"
          align="center"
        />
        <el-table-column
          prop="status"
          label="上架状态"
          align="center"
        >
          <template slot-scope="scope">
            <span style="color: #1890ff">{{
              scope.row.status == 1 ? "上架" : "下架"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="操作" align="center">
          <template slot-scope="scope">
            <div class="operateBtns">
              <el-link type="primary">查看</el-link>
              <el-link type="primary">编辑</el-link>
              <el-link type="primary">下架</el-link>
              <el-link type="danger">删除</el-link>
              <el-link type="primary">取消活动</el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  props: [""],
  data() {
    return {
      form: {
        type: "",
        status: "",
        title: "",
      },
      tableData: [
        {
          type: "达人活动",
          title: "太极社团活动",
          address: "康养联合体1F多功能厅（29幢1单元）",
          time: "2023-09-08 14:00~2023-09-08 15:30",
          jztime: "2023-09-08 15:00:00",
          score: "20",
          maxNum: 10,
          signNum: 10,
          qdNum: 10,
          status: 1,
        },
        {
          type: "达人活动",
          title: "太极社团活动",
          address: "",
          time: "",
          jztime: "",
          score: "20",
          maxNum: 10,
          signNum: 10,
          qdNum: 10,
          status: 2,
        },
        {
          type: "达人活动",
          title: "太极社团活动",
          address: "",
          time: "",
          jztime: "",
          score: "20",
          maxNum: 10,
          signNum: 10,
          qdNum: 10,
          status: 1,
        },
        {
          type: "达人活动",
          title: "太极社团活动",
          address: "",
          time: "",
          jztime: "",
          score: "20",
          maxNum: 10,
          signNum: 10,
          qdNum: 10,
          status: 2,
        },
        {
          type: "达人活动",
          title: "太极社团活动",
          address: "",
          time: "",
          jztime: "",
          score: "20",
          maxNum: 10,
          signNum: 10,
          qdNum: 10,
          status: 1,
        },
        {
          type: "达人活动",
          title: "太极社团活动",
          address: "",
          time: "",
          jztime: "",
          score: "20",
          maxNum: 10,
          signNum: 10,
          qdNum: 10,
          status: 2,
        },
        {
          type: "达人活动",
          title: "太极社团活动",
          address: "",
          time: "",
          jztime: "",
          score: "20",
          maxNum: 10,
          signNum: 10,
          qdNum: 10,
          status: 1,
        },
        {
          type: "达人活动",
          title: "太极社团活动",
          address: "",
          time: "",
          jztime: "",
          score: "20",
          maxNum: 10,
          signNum: 10,
          qdNum: 10,
          status: 2,
        },
        {
          type: "达人活动",
          title: "太极社团活动",
          address: "",
          time: "",
          jztime: "",
          score: "20",
          maxNum: 10,
          signNum: 10,
          qdNum: 10,
          status: 1,
        },
        {
          type: "达人活动",
          title: "太极社团活动",
          address: "",
          time: "",
          jztime: "",
          score: "20",
          maxNum: 10,
          signNum: 10,
          qdNum: 10,
          status: 2,
        },
      ],
    };
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    onSubmit() {},
    resetForm(formName) {
      this.$refs[formName].resetFields();
      console.log(this.form);
    },
    onAdd() {},
  },

  watch: {},
};
</script>
<style lang='scss' scoped>
.activityPage {
  .searchBox {
    margin-bottom: 14px;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 120px;
    /deep/.el-form-item {
      margin-bottom: 0;
      .el-input__inner {
        width: 300px;
      }
    }
  }
  .tablesCard {
  }
}
</style>